<template>
  <div class="record">
    <van-tabs v-model="active" color="#4b99fe" title-active-color="#4b99fe">
      <van-tab title="当前咨询">
          <dl class="zhao">
            <dt>
              <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1077085902,3089798203&fm=26&gp=0.jpg" alt="">
            </dt>
            <dd>
              <p>暂无医生</p>
              <button>去找医生</button>
            </dd>
          </dl>
      </van-tab>
      <van-tab title="历史咨询">
        <el-card class="box-card">
          <div v-for="o in 1" :key="o" class="text item">
            <h2>
              <b>杨琦</b>
              <span>消化内科</span>
            </h2>
            <p>银川平安互联网医院丶成都平安健康互联网医院</p>
            <p>主诉：胃疼</p>
            <p>
              就诊人：匿名用户 21岁 男
              <span>2020.12.11 13:44</span>
            </p>
            <p>
              <button class="evaluate">评价</button>
              <button>查看详情</button>
            </p>
          </div>
        </el-card>

        <el-card class="box-card">
          <div v-for="o in 1" :key="o" class="text item">
            <h2>
              <b>杨琦</b>
              <span>消化内科</span>
            </h2>
            <p>银川平安互联网医院丶成都平安健康互联网医院</p>
            <p>主诉：胃疼</p>
            <p>
              就诊人：匿名用户 21岁 男
              <span>2020.12.11 13:44</span>
            </p>
            <p>
              <button class="evaluate">评价</button>
              <button>查看详情</button>
            </p>
          </div>
        </el-card>

        <el-card class="box-card">
          <div v-for="o in 1" :key="o" class="text item">
            <h2>
              <b>杨琦</b>
              <span>消化内科</span>
            </h2>
            <p>银川平安互联网医院丶成都平安健康互联网医院</p>
            <p>主诉：胃疼</p>
            <p>
              就诊人：匿名用户 21岁 男
              <span>2020.12.11 13:44</span>
            </p>
            <p>
              <button class="evaluate">评价</button>
              <button>查看详情</button>
            </p>
          </div>
        </el-card>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
    name:'record',
    data() {
    return {
      active: 0,
      
    };
  },
}
</script>

<style>
  .zhao{
    position: absolute;
    left: 50%;
    margin:0 auto;
    transform: translate(-50%,0);
    margin-top:1rem;
  }
  .zhao dt img{
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
  }
  .zhao dd{
    text-align: center;
    font-size: 16px;
    line-height: 35px;
  }
  .zhao dd button{
    width: 1.5rem;
    background: #5daefe;
    color:#fff;
    border-radius: 0.45rem;
    border:none
  }
  .van-tabs__wrap{
    width: 50%;
  }

  .text {
    font-size: 14px;
  }

  .item p,h2{
    padding: 8px 0;
  }

  .box-card {
    width: 95%;
    margin:0 auto;
    border-radius: 10px;
    margin-top:5px
  }

  .box-card button{
    float: right;
    height: 0.3rem;
    background: #fff;
    border:1px solid #ccc;
    border-radius: 0.2rem;
    padding: 0 0.1rem 0 0.1rem;
    margin-left:10px
  }
  .box-card h2{
    font-size: 18px;
  }
.box-card .evaluate{
  border:1px solid #597ef7;
  color:#597ef7
}

</style>